<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SmartInput 设置</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
  <div class="options-container">
    <div class="header">
      <div class="logo">
        <span class="icon">🎤</span>
        <span class="title">SmartInput 设置</span>
      </div>
    </div>
    
    <div class="main-content">
      <div class="settings-section">
        <h2>基本设置</h2>
        
        <div class="setting-group">
          <label for="apiBase">API服务器地址</label>
          <input type="url" id="apiBase" placeholder="https://api.mensanyun.com/api">
          <p class="setting-description">SmartInput后端服务的API地址</p>
        </div>
        
        <div class="setting-group">
          <label for="wsBase">WebSocket服务器地址</label>
          <input type="url" id="wsBase" placeholder="wss://api.mensanyun.com/ws">
          <p class="setting-description">SmartInput后端服务的WebSocket地址</p>
        </div>
        
        <div class="setting-group">
          <label for="deviceName">设备名称</label>
          <input type="text" id="deviceName" placeholder="我的Chrome扩展">
          <p class="setting-description">用于标识此设备的友好名称</p>
        </div>
        
        <div class="setting-group">
          <label for="autoConnect">自动连接</label>
          <input type="checkbox" id="autoConnect" checked>
          <p class="setting-description">启动时自动连接到服务器</p>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>语音设置</h2>
        
        <div class="setting-group">
          <label for="voiceEnabled">启用语音输入</label>
          <input type="checkbox" id="voiceEnabled" checked>
          <p class="setting-description">允许使用语音识别功能</p>
        </div>
        
        <div class="setting-group">
          <label for="voiceLanguage">语音识别语言</label>
          <select id="voiceLanguage">
            <option value="zh-CN">中文（简体）</option>
            <option value="zh-TW">中文（繁体）</option>
            <option value="en-US">English (US)</option>
            <option value="ja-JP">日本語</option>
            <option value="ko-KR">한국어</option>
          </select>
          <p class="setting-description">语音识别的目标语言</p>
        </div>
        
        <div class="setting-group">
          <label for="voiceConfidence">识别置信度阈值</label>
          <input type="range" id="voiceConfidence" min="0.1" max="1.0" step="0.1" value="0.7">
          <span class="range-value" id="confidenceValue">0.7</span>
          <p class="setting-description">低于此值的识别结果需要用户确认</p>
        </div>
        
        <div class="setting-group">
          <label for="autoInsert">自动插入文本</label>
          <input type="checkbox" id="autoInsert" checked>
          <p class="setting-description">高置信度时自动插入识别结果</p>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>同步设置</h2>
        
        <div class="setting-group">
          <label for="syncEnabled">启用文字同步</label>
          <input type="checkbox" id="syncEnabled" checked>
          <p class="setting-description">允许与其他设备同步文字</p>
        </div>
        
        <div class="setting-group">
          <label for="syncTarget">同步目标</label>
          <select id="syncTarget">
            <option value="all">所有设备</option>
            <option value="mobile">仅移动设备</option>
            <option value="desktop">仅桌面设备</option>
            <option value="current">仅当前设备</option>
          </select>
          <p class="setting-description">文字同步的目标设备范围</p>
        </div>
        
        <div class="setting-group">
          <label for="syncNotification">同步通知</label>
          <input type="checkbox" id="syncNotification" checked>
          <p class="setting-description">收到同步文字时显示通知</p>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>界面设置</h2>
        
        <div class="setting-group">
          <label for="theme">主题</label>
          <select id="theme">
            <option value="light">浅色主题</option>
            <option value="dark">深色主题</option>
            <option value="auto">跟随系统</option>
          </select>
          <p class="setting-description">扩展界面的显示主题</p>
        </div>
        
        <div class="setting-group">
          <label for="showFloatingPanel">显示浮动面板</label>
          <input type="checkbox" id="showFloatingPanel" checked>
          <p class="setting-description">在网页上显示SmartInput浮动面板</p>
        </div>
        
        <div class="setting-group">
          <label for="showVoiceButton">显示语音按钮</label>
          <input type="checkbox" id="showVoiceButton" checked>
          <p class="setting-description">在输入框旁显示语音输入按钮</p>
        </div>
        
        <div class="setting-group">
          <label for="panelPosition">面板位置</label>
          <select id="panelPosition">
            <option value="top-right">右上角</option>
            <option value="top-left">左上角</option>
            <option value="bottom-right">右下角</option>
            <option value="bottom-left">左下角</option>
          </select>
          <p class="setting-description">浮动面板在页面中的位置</p>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>快捷键设置</h2>
        
        <div class="setting-group">
          <label for="voiceShortcut">语音输入快捷键</label>
          <input type="text" id="voiceShortcut" value="Ctrl+Shift+V" readonly>
          <button class="edit-shortcut-btn" data-target="voiceShortcut">编辑</button>
          <p class="setting-description">触发语音输入的键盘快捷键</p>
        </div>
        
        <div class="setting-group">
          <label for="syncShortcut">文字同步快捷键</label>
          <input type="text" id="syncShortcut" value="Ctrl+Shift+S" readonly>
          <button class="edit-shortcut-btn" data-target="syncShortcut">编辑</button>
          <p class="setting-description">触发文字同步的键盘快捷键</p>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>账户设置</h2>
        
        <div class="setting-group">
          <label for="username">用户名</label>
          <input type="text" id="username" placeholder="请输入用户名">
          <p class="setting-description">用于登录SmartInput服务的用户名</p>
        </div>
        
        <div class="setting-group">
          <label for="password">密码</label>
          <input type="password" id="password" placeholder="请输入密码">
          <p class="setting-description">用于登录SmartInput服务的密码</p>
        </div>
        
        <div class="setting-group">
          <button class="login-btn" id="loginBtn">登录</button>
          <button class="logout-btn" id="logoutBtn">登出</button>
          <p class="setting-description">登录后可以享受更多功能</p>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>高级设置</h2>
        
        <div class="setting-group">
          <label for="debugMode">调试模式</label>
          <input type="checkbox" id="debugMode">
          <p class="setting-description">启用详细的调试日志输出</p>
        </div>
        
        <div class="setting-group">
          <label for="logLevel">日志级别</label>
          <select id="logLevel">
            <option value="error">错误</option>
            <option value="warn">警告</option>
            <option value="info" selected>信息</option>
            <option value="debug">调试</option>
          </select>
          <p class="setting-description">控制日志输出的详细程度</p>
        </div>
        
        <div class="setting-group">
          <button class="export-btn" id="exportBtn">导出设置</button>
          <button class="import-btn" id="importBtn">导入设置</button>
          <button class="reset-btn" id="resetBtn">重置设置</button>
          <p class="setting-description">备份或恢复扩展设置</p>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <div class="button-group">
        <button class="save-btn" id="saveBtn">保存设置</button>
        <button class="cancel-btn" id="cancelBtn">取消</button>
      </div>
      <div class="version-info">
        <span class="version">SmartInput v3.0.0</span>
      </div>
    </div>
  </div>
  
  <script src="config.js"></script>
  <script src="options.js"></script>
</body>
</html> 